<template>
  <div class="menu" :class="{ hidden: isCollapse }">
    <Logo :collapse="isCollapse" />
    <div class="menu-container" ref="menuContainer">
      <el-scrollbar :height="scrollbarHeight" always>
        <el-menu class="el-menu" :collapse="isCollapse" :router="true" @open="handleOpen" @close="handleClose" select="handleSelectMenu" :default-active="defaultActive">
          <template v-for="item in menuItems">
            <el-menu-item v-if="!item.meta.link" :index="item.name" :route="{ path: item.name }">
              <el-icon><Calendar /></el-icon>
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
            <li class="el-menu-item" v-else :index="item.name">
              <a :href="`${item.meta.link}${item.query}`" target="_blank" style="color: rgb(51, 51, 51);flex: 1;justify-content: flex-start;display: flex;align-items: center;">
                <el-icon><Calendar /></el-icon>
                <span>{{ item.meta.title }}</span>
              </a>
            </li>
          </template>
          <template v-if="isDev">
            <el-menu-item>
              <el-icon><Medal /></el-icon>
              <template #title>【开发中】</template>
            </el-menu-item>
            <el-menu-item index="ExportWord" :route="{ name: 'ExportWord' }">
              <el-icon><Medal /></el-icon>
              <template #title>导出Word文档</template>
            </el-menu-item>
            <el-menu-item index="WorkOrderConsole" :route="{ name: 'WorkOrderConsole' }">
              <el-icon><Medal /></el-icon>
              <template #title>工单操作台</template>
            </el-menu-item>
            <el-menu-item index="WorkOrderConsoleByUser" :route="{ name: 'WorkOrderConsoleByUser' }">
              <el-icon><Medal /></el-icon>
              <template #title>工单操作台 - 用户申请</template>
            </el-menu-item>
            <el-menu-item index="WorkOrderConsoleByUser2" :route="{ name: 'WorkOrderConsoleByUser2' }">
              <el-icon><Medal /></el-icon>
              <template #title>工单操作台 - 用户处理</template>
            </el-menu-item>
            <el-menu-item index="ProjectStatistics2" :route="{ name: 'ProjectStatistics2' }">
              <el-icon><Medal /></el-icon>
              <template #title>项目任务计划2</template>
            </el-menu-item>
            <el-menu-item index="ProjectTaskPlan" :route="{ name: 'ProjectTaskPlan' }">
              <el-icon><Medal /></el-icon>
              <template #title>项目任务计划</template>
            </el-menu-item>
            <el-menu-item index="ProjectStatistics" :route="{ name: 'ProjectStatistics' }">
              <el-icon><Medal /></el-icon>
              <template #title>项目统计</template>
            </el-menu-item>
            <el-menu-item index="UsersAttendanceCalendar" :route="{ name: 'UsersAttendanceCalendar' }">
              <el-icon><Medal /></el-icon>
              <template #title>个人考勤信息月历表</template>
            </el-menu-item>
            <el-menu-item index="UsersOvertimeList" :route="{ name: 'UsersOvertimeList' }">
              <el-icon><Medal /></el-icon>
              <template #title>员工加班列表</template>
            </el-menu-item>
            <el-menu-item index="UsersLeaveList" :route="{ name: 'UsersLeaveList' }">
              <el-icon><Medal /></el-icon>
              <template #title>员工请假列表</template>
            </el-menu-item>
            <el-menu-item index="UsersList" :route="{ name: 'UsersList' }">
              <el-icon><Medal /></el-icon>
              <template #title>员工信息列表</template>
            </el-menu-item>
            <el-menu-item index="AttendancePersonalList" :route="{ name: 'AttendancePersonalList' }">
              <el-icon><Medal /></el-icon>
              <template #title>AttendancePersonalList</template>
            </el-menu-item>
            <el-menu-item index="AttendanceTeamList" :route="{ name: 'AttendanceTeamList' }">
              <el-icon><Medal /></el-icon>
              <template #title>AttendanceTeamList</template>
            </el-menu-item>
            <el-menu-item index="LeaveApproval" :route="{ name: 'LeaveApproval' }">
              <el-icon><Medal /></el-icon>
              <template #title>LeaveApproval</template>
            </el-menu-item>
            <el-menu-item index="TestCGT" :route="{ name: 'TestCGT' }">
              <el-icon><Medal /></el-icon>
              <template #title>TestCGT</template>
            </el-menu-item>
            <el-menu-item index="Training" :route="{ name: 'Training' }">
              <el-icon><Medal /></el-icon>
              <template #title>Training</template>
            </el-menu-item>
            <el-menu-item index="AssetStatistics" :route="{ name: 'AssetStatistics' }">
              <el-icon><Medal /></el-icon>
              <template #title>AssetStatistics</template>
            </el-menu-item>
            <el-menu-item index="ClockinListComp" :route="{ name: 'ClockinListComp' }">
              <el-icon><Medal /></el-icon>
              <template #title>补卡申请</template>
            </el-menu-item>
            <el-menu-item index="PersonalCenter" :route="{ name: 'PersonalCenter' }">
              <el-icon><Medal /></el-icon>
              <template #title>个人中心</template>
            </el-menu-item>
            <el-menu-item index="HolidaySet" :route="{ name: 'HolidaySet' }">
              <el-icon><Medal /></el-icon>
              <template #title>HolidaySet</template>
            </el-menu-item>
            <el-menu-item index="UserSelf" :route="{ name: 'UserSelf' }">
              <el-icon><Medal /></el-icon>
              <template #title>UserSelf</template>
            </el-menu-item>
            <el-menu-item index="LeaveStatistics" :route="{ name: 'LeaveStatistics' }">
              <el-icon><Medal /></el-icon>
              <template #title>LeaveStatistics</template>
            </el-menu-item>
            <el-menu-item index="LeaveStatistics2" :route="{ name: 'LeaveStatistics2' }">
              <el-icon><Medal /></el-icon>
              <template #title>LeaveStatistics2</template>
            </el-menu-item>
            <el-menu-item index="Overtime" :route="{ name: 'Overtime' }">
              <el-icon><Medal /></el-icon>
              <template #title>加班</template>
            </el-menu-item>
            <el-menu-item index="OvertimeList" :route="{ name: 'OvertimeList' }">
              <el-icon><Medal /></el-icon>
              <template #title>加班列表</template>
            </el-menu-item>
            <el-menu-item index="OvertimeList2" :route="{ name: 'OvertimeList2' }">
              <el-icon><Medal /></el-icon>
              <template #title>加班列表2</template>
            </el-menu-item>
            <el-menu-item index="Leave" :route="{ name: 'Leave' }">
              <el-icon><Medal /></el-icon>
              <template #title>请假</template>
            </el-menu-item>
            <el-menu-item index="LeaveList" :route="{ name: 'LeaveList' }">
              <el-icon><Medal /></el-icon>
              <template #title>请假List</template>
            </el-menu-item>
            <el-menu-item index="LeaveList2" :route="{ name: 'LeaveList2' }">
              <el-icon><Medal /></el-icon>
              <template #title>请假List2</template>
            </el-menu-item>
            <el-menu-item index="WorkingDesktop" :route="{ name: 'WorkingDesktop' }">
              <el-icon><Calendar /></el-icon>
              <template #title>工作台</template>
            </el-menu-item>
            <el-menu-item index="HumanStatistics" :route="{ name: 'HumanStatistics' }">
              <el-icon><SetUp /></el-icon>
              <template #title>人力统计(组)</template>
            </el-menu-item>
            <el-menu-item index="Statistics" :route="{ name: 'Statistics' }">
              <el-icon><SwitchFilled /></el-icon>
              <template #title>Statistics</template>
            </el-menu-item>
            <el-menu-item index="ProductionReport" :route="{ name: 'ProductionReport' }">
              <el-icon><VideoCameraFilled /></el-icon>
              <template #title>ProductionReport</template>
            </el-menu-item>
            <el-menu-item index="Chart" :route="{ name: 'Chart' }">
              <el-icon><PieChart /></el-icon>
              <template #title>图表</template>
            </el-menu-item>
            <el-menu-item index="QuickNavigation" :route="{ name: 'QuickNavigation' }">
              <el-icon><PieChart /></el-icon>
              <template #title>QuickNavigation</template>
            </el-menu-item>
            <el-menu-item index="Test" :route="{ name: 'Test' }">
              <el-icon><PieChart /></el-icon>
              <template #title>Test</template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <div>
      <el-menu class="el-menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <el-menu-item v-if="false">
          <el-icon><Setting /></el-icon>
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item @click="isCollapse = !isCollapse">
          <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
          <template #title>{{ isCollapse ? '展开' : '收起' }}</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCurrentViews } from '../../stores'
// import IUser from '../../interface/IUsers'
import { SetUp, Calendar, Setting, SwitchFilled, PieChart, VideoCameraFilled, Medal, Expand, Fold } from '@element-plus/icons-vue'
import Logo from './Logo.vue'
import.meta.env

// const usersStore = useUsersStore()
const isCollapse = ref(false)
const menuContainer = ref(ref<HTMLElement | null>(null))
const scrollbarHeight = ref(400)
// const user = ref(usersStore.getAllState() || { role: 5 })
// console.log('user', user.value.role)
const defaultActive = ref<any>('')
const isDev = ref(true)
const router = useRouter()
const menuItems = ref<any[]>([])
if (import.meta.env.VITE_APP_ENV === 'production') {
  isDev.value = false
}
const route = useRoute()
watch(
  () => route.name,
  () => {
    // newValue
    // console.log('route.name', newValue)
  }
)
onMounted(async () => {
  await getMenuItems()
  defaultActive.value = router.currentRoute.value.path

  // console.log('router', router.currentRoute.value.name, '')
  // const temp = usersStore.getAllState() as IUser
  if (menuContainer.value) {
    scrollbarHeight.value = menuContainer.value.offsetHeight
  }
})
/**
 * 异步获取菜单项
 *
 * 本函数通过发送HTTP GET请求来获取系统的菜单项，特别关注名为'Statistics'的菜单项的子菜单
 * 使用了async/await语法糖来处理异步操作，使得代码更加简洁易读
 */
const getMenuItems = async () => {
  // // 发送HTTP GET请求，路径为'/dev-api/system/menu/getRouters'，无参数
  // const res = await http({
  //   method: 'GET',
  //   path: '/dev-api/system/menu/getRouters',
  //   params: {},
  // })
  // // 在返回的数据中查找名为'Statistics'的菜单项，并将其子菜单赋值给menuItems.value
  // // 如果没有找到，则menuItems.value为空数组
  // menuItems.value = res.data.find((e: any) => e.name === 'Statistics')?.children || []
  const views = useCurrentViews().getAllState()
  if (views.children) {
    menuItems.value = views.children
  } else {
    menuItems.value = [views]
  }
  // console.log('menuItems', menuItems.value)
}
// /
/**
 * 处理打开事件
 *
 * @param key 要打开的项的键名
 * @param keyPath 要打开的项的键路径数组
 */
const handleOpen = () => {
  // key: string, keyPath: string[]
  // console.log(key, keyPath)
}
/**
 * 处理关闭事件
 *
 * @param key 关闭项的 key 值
 * @param keyPath 关闭项在树形结构中的路径数组
 */
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
/**
 * 处理选择菜单项的函数
 *
 * @param key 菜单项的键名
 */
// const handleSelectMenu = (key: string) => {
//   console.log(key)
// }
</script>

<style lang="scss" scoped>
.menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--el-border-color);
  width: 240px;
  transition: width 0.3s ease;
  overflow: hidden;
  &.hidden {
    width: 65px;
  }
  .menu-container {
    flex: 1;
    border-bottom: 1px solid var(--el-border-color);
  }
  .el-menu {
    border: 0;
  }
}
</style>
